import React,{useState,memo} from 'react';
import { useHistory } from 'react-router-dom';
import { useEffect } from 'react';
import * as api from "@/api/index"
import * as actionTypes from "../shopping/store/actionCreators"
import "./Detail.css"
import Rotation from '@/components/detail/rotationImg/Rotation';
import detailImg from "@/assets/images/detail-pic.png"
import loading from "@/assets/images/Loading.png"
import ShoppingCar from "@/components/detail/shoppingCar/ShoppingCar"
import ShoppingPopup from "@/components/detail/shoppingPopup/ShoppingPopup"
import Scroll from "@/baseUI/Scroll"
import { connect } from 'react-redux';

const Detail=(props)=>{
    // console.log(props.addShopCar,'-=-=--------');
    const {goods,addShopCar}=props
    // console.log(props.location.pathname);
    let pathname=props.location.pathname
   let id=pathname.split(`/detail/`)[1]; 
    const [detail,setDetail]=useState([])
    const [success,setSuccess]=useState(false)
    const [showPopup,setShowPopup]=useState(false)
    // 返回首页
    let navigator=useHistory()
    const navigatorTo=()=>{
        navigator.push('/home/main')     
    }
    // 点击加购成功
    const handleOnclick=(detail)=>{
        setShowPopup(!showPopup)
        addShopCar(detail,goods)
        setTimeout(()=>{
            setShowPopup(showPopup)
        },1000)
    }
    // console.log(goods,'goods');
    useEffect(()=>{
        // 获取对应商品信息
        api
        .reqlist()
        .then(res=>{
            // console.log(res,'detail');
            if(res.status==200){
                let list=res.data.data.ListData
                let defList=res.data.defaultdata.list
                list.push.apply(list,defList)
                // console.log(list[id]);
                setDetail(list[id])
                // 拿到数据后再渲染
                setSuccess(true)
            }
        })
    },[])

    return(
        <>
        <Scroll>
        <div className="goback">
           <div className="back" onClick={()=>navigatorTo()}></div>
            考拉海购
            </div>
        <div className="context">
            <div className="img">
                {success?<Rotation rotation={detail.imageArr}/>:<img src={loading}/>}
            </div>
            <div className="price">{detail.price}</div>
            <div className="price">{detail.title}</div>
            <div className="location">{detail.location}</div>
        </div>
        <img src={detailImg} alt="" className='detailImg' />
        <ShoppingCar showPopup={()=>{handleOnclick(detail)}} goods={goods}/>
        </Scroll>
        <ShoppingPopup display={showPopup} />
        </>
    )

    }

const mapStateToProps=(state)=>{
    // console.log(state,'---=-');
    return{
        goods:state.shopping.goods
    }
}
const mapStateToDispatch=(dispatch)=>{
    return{
        addShopCar(data,goods){
            if(goods.findIndex((item)=>data.id==item.id)==-1){
                dispatch(actionTypes.getGoods(data))
            }
            else{
                let index=goods.findIndex((item)=>data.id==item.id)
                    dispatch(actionTypes.getGoodsCount(data,index))
                
            }
        }
    }
}
export default connect(mapStateToProps,mapStateToDispatch)(memo(Detail))